﻿<!DOCTYPE html>
<html>
<head>
    <title>JS Application</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
    <style>
        .main-container {
            padding-top: 70px;
        }

        pre:empty {
            display: none;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">JS Application</a>
            </div>
        </div>
    </nav>

    <div class="container main-container">
        <div class="row">
            <div class="col-xs-12">
                <ul class="list-inline list-unstyled requests">
                    <li><a href="index.html" class="btn btn-primary">Home</a></li>
                    <li><button type="button" class="btn btn-default js-login">Login</button></li>
                    <li><button type="button" class="btn btn-default js-call-api">Call API</button></li>
                    <li><button type="button" class="btn btn-danger js-logout">Logout</button></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-heading">User data</div>
                    <div class="panel-body">
                        <pre class="js-user"></pre>
                    </div>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-heading">API call result</div>
                    <div class="panel-body">
                        <pre class="js-api-result"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="node_modules/oidc-client/dist/oidc-client.js"></script>

    <script>
        // helper function to show data to the user
        function display(selector, data) {
            if (data && typeof data === 'string') {
                data = JSON.parse(data);
            }
            if (data) {
                data = JSON.stringify(data, null, 2);
            }

            $(selector).text(data);
        }

        var settings = {
            authority: 'https://localhost:44300',
            client_id: 'js',
            popup_redirect_uri: 'http://localhost:56668/popup.html',
            silent_redirect_uri: 'http://localhost:56668/silent-renew.html',
            post_logout_redirect_uri: 'http://localhost:56668/index.html',

            response_type: 'id_token token',
            scope: 'openid profile email api',

            accessTokenExpiringNotificationTime: 4,
            automaticSilentRenew: true,

            filterProtocolClaims: true
        };

        var manager = new Oidc.UserManager(settings);
        var user;

        Oidc.Log.logger = console;

        manager.events.addUserLoaded(function (loadedUser) {
            user = loadedUser;
            display('.js-user', user);
        });

        manager.events.addSilentRenewError(function (error) {
            console.error('error while renewing the access token', error);
        });

        manager.events.addUserSignedOut(function () {
            alert('The user has signed out');
        });

        $('.js-login').on('click', function () {
            manager
                .signinPopup()
                .catch(function (error) {
                    console.error('error while logging in through the popup', error);
                });
        });

        $('.js-call-api').on('click', function () {
            var headers = {};
            if (user && user.access_token) {
                headers['Authorization'] = 'Bearer ' + user.access_token;
            }

            $.ajax({
                url: 'http://localhost:60136/values',
                method: 'GET',
                dataType: 'json',
                headers: headers
            }).then(function (data) {
                display('.js-api-result', data);
            }).catch(function (error) {
                display('.js-api-result', {
                    status: error.status,
                    statusText: error.statusText,
                    response: error.responseJSON
                });
            });
        });

        $('.js-logout').on('click', function () {
            manager
                .signoutRedirect()
                .catch(function (error) {
                    console.error('error while signing out user', error);
                });
        });
    </script>
</body>
</html>